<template>
  <div class="content">
     <ul class="list">
       <li class="item" v-for="(item,key) of cities" :key="key" @click="handleLetterClick"
       @touchstart = "handleTouchStart"
       @touchmove = "handleTouchMove"
       @touchend = "handleTouchEnd"

       >{{key}}</li>
    </ul>

  </div>
</template>


<script>
export default {
  name:"CityAlphabet",
  props : {
    cities:Object
  },
  data () {
    return {
      touchStatus:false
    }
  },
  methods:{
    handleLetterClick (e) {
       //向外触发事件:
       this.$emit("change",e.target.innerText)
       //console.log(e.target.innerText)
    },
    handleTouchStart () {
      this.touchStatus = true
    },
    handleTouchMove(){
       if(this.touchStatus){

       }
    },
    handleTouchEnd () {
       this.touchStatus = false
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl';
   .list
      display flex
      flex-direction column
      justify-content center
      position absolute
      top 1.7rem
      right 0
      bottom 0
      width .4rem
      .item
        text-align center
        line-height .44rem
        color $bgColor


</style>
